<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="标识" prop="mark_name">
        <el-input v-model="form.mark_name" maxlength="20" placeholder="请输入标识" />
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" maxlength="6" show-word-limit placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="特点" prop="msg">
        <el-input v-model="form.msg" type="textarea" rows="3" show-word-limit placeholder="请输入特点" maxlength="200" />
      </el-form-item>
      <el-form-item label="操作配合" prop="text">
        <el-input v-model="form.text" type="textarea" rows="3" show-word-limit placeholder="请输入操作配合" maxlength="200" />
      </el-form-item>
      <el-form-item label="位置缩略图" prop="photo">
        <UploadimgInput v-model="form.photo" />
        <!-- <el-input v-model="form.photo" placeholder="请输入位置缩略图" /> -->
      </el-form-item>
      <el-form-item label="投放版位缩略图" prop="position_photo">
        <UploadimgInput v-model="form.position_photo" />
        <!-- <el-input v-model="form.position_photo" placeholder="请输入投放版位缩略图" /> -->
      </el-form-item>
      <el-form-item label="图标缩略图" prop="icon">
        <UploadimgInput v-model="form.icon" imgwidth="40px" imgheight="40px" />
        <!-- <el-input v-model="form.icon" placeholder="请输入图标缩略图" /> -->
      </el-form-item>
      <el-form-item label="出价方式" prop="phone">
        <span>千次展示付费、固定广告位展示付费、点击付费</span>
      </el-form-item>
      <el-form-item label="千次展示付费" prop="coin_ecpm_all">
        <el-input
          v-model="form.coin_ecpm_all"
          @input="(e) => (form.coin_ecpm_all= integerZeroFn(e))"
          maxlength="9"
          placeholder="千次展示收费（不限城市）"
          οnkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
        />
      </el-form-item>
      <el-form-item label="" prop="coin_ecpm_province">
        <el-input
          v-model="form.coin_ecpm_province"
          @input="(e) => (form.coin_ecpm_province= integerZeroFn(e))"
          maxlength="9"
          placeholder="千次展示收费（一类城市）"
        />
      </el-form-item>
      <el-form-item label="" prop="coin_ecpm_city">
        <el-input
          v-model="form.coin_ecpm_city"
          @input="(e) => (form.coin_ecpm_city= integerZeroFn(e))"
          maxlength="9"
          placeholder="千次展示收费（二类城市）"
        />
      </el-form-item>
      <el-form-item label="" prop="coin_ecpm_area">
        <el-input
          v-model="form.coin_ecpm_area"
          @input="(e) => (form.coin_ecpm_area= integerZeroFn(e))"
          maxlength="9"
          placeholder="千次展示收费（三类城市）"
        />
      </el-form-item>
      <el-form-item label="固定广告位展示付费" prop="coin_lock">
        <el-input
          v-model="form.coin_lock"
          @input="(e) => (form.coin_lock= integerZeroFn(e))"
          maxlength="9"
          placeholder="请输入固定广告位展示付费"
        />
      </el-form-item>
      <el-form-item label="点击付费" prop="coin_click">
        <el-input v-model="form.coin_click" @input="(e) => (form.coin_click= integerZeroFn(e))"
          maxlength="9" placeholder="请输入点击付费" />
      </el-form-item>
      <el-form-item label="广告位状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">开启广告位</el-radio>
          <el-radio :label="0">关闭广告位</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="展示区状态" prop="display_status">
        <el-radio-group v-model="form.display_status">
          <el-radio :label="1">开启</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="flexend">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading='loading' @click="onsubmit">确 定</el-button>
    </div>
  </div>
</template>

<script>
import UploadimgInput from "@/components/UploadimgInput";
import { positionCreateData, getPositionInfo,positionEditData } from "@/api/flow";
export default {
  data() {
    return {
      form: {},
      rules: {
        mark_name: [
          { required: true, message: "标识不能为空", trigger: "blur" },
        ],
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        msg: [{ required: true, message: "特点不能为空", trigger: "blur" }],
        text: [
          { required: true, message: "操作配合不能为空", trigger: "blur" },
        ],
        photo: [
          { required: true, message: "位置缩略图不能为空", trigger: "blur" },
        ],
        position_photo: [
          {
            required: true,
            message: "投放版位缩略图不能为空",
            trigger: "blur",
          },
        ],
        icon: [
          { required: true, message: "图标缩略图不能为空", trigger: "blur" },
        ],
        coin_ecpm_all: [
          {
            required: true,
            message: "千次展示付费（不限城市）不能为空",
            trigger: "blur",
          },
        ],
        coin_ecpm_province: [
          {
            required: true,
            message: "千次展示收费（一类城市）不能为空",
            trigger: "blur",
          },
        ],
        coin_ecpm_city: [
          {
            required: true,
            message: "千次展示收费（二类城市）不能为空",
            trigger: "blur",
          },
        ],
        coin_ecpm_area: [
          {
            required: true,
            message: "千次展示收费（三类城市）不能为空",
            trigger: "blur",
          },
        ],
        coin_lock: [
          {
            required: true,
            message: "固定广告位展示付费不能为空",
            trigger: "blur",
          },
        ],
        coin_click: [
          { required: true, message: "点击付费不能为空", trigger: "blur" },
        ],
        display_status: [
          { required: true, message: "请选择展示状态", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择广告位状态", trigger: "blur" },
        ],
      },
      loading:false
    };
  },
  created() {
    this.reset();
    if (this.advId) {
      this.getAdvInfo();
    }
  },
  props: {
    plateId: {
      require: true,
      default: "",
    },
    advId: {
      default: "",
    },
  },
  components: {
    UploadimgInput,
  },
  methods: {
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        mark_name: undefined,
        msg: undefined,
        text: undefined,
        photo: undefined,
        position_photo: undefined,
        icon: undefined,
        status: 1,
        display_status: 1,
        coin_ecpm_all: undefined,
        coin_ecpm_province: undefined,
        coin_ecpm_city: undefined,
        coin_ecpm_area: undefined,
        coin_lock: undefined,
        coin_click: undefined,
        plate_id: this.plateId,
      };
      this.resetForm("form");
    },

    getAdvInfo() {
      getPositionInfo({ id: this.advId }).then((res) => {
        let data = res.data;
        this.form = data;
      });
    },

    handleClose(){
      this.$emit('close')
    },

    onsubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.loading = true
        if (this.advId) {
          //编辑
          positionEditData(this.form).then((res) => {
            this.$message.success("编辑成功");
            this.loading = false
            this.$emit("reflush");
          }).catch(()=>{
            this.loading = false
          });
        } else {
          positionCreateData(this.form).then((res) => {
            this.$message.success("新增成功");
            this.loading = false
            this.$emit("reflush");
          }).catch(()=>{
            this.loading = false
          });
        }
      });
      console.log(this.form);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>